<template>
	<view class="container">
		<view class="navBar">
			<view :class="['navItem',{'active':navIndex===index}]" v-for="(item,index) in nav"
				@click="changeStatus(item,index)" :key="index">
				{{item}}
			</view>
		</view>
		<view v-if="list.length===0">
			<luanqing-empty :show="true" text="没有更多数据啦" textColor="#000"></luanqing-empty>
		</view>
		<scroll-view scroll-y="true" v-if="list.length>0">
			<view class="item" v-for="(item,index) in list" :key="index">
				<navigator :url="'./detail?order_id='+item.order_id" hover-class="none">
					<view class="statusContainer">
						<view class="status">
							<text v-if="item.status===0" :style="{color:'#FE7859'}">未支付</text>
							<text v-else-if="item.status===1||item.status===2">已支付</text>
							<text v-else>已取消</text>
						</view>
						<view class="time">
							<view v-if="item.status===0" :style="{color:'#FE7859'}">
								<text v-if="item.order_time<0">已超时</text>
								<view v-else class="timeContainer">
									<countdown :start="time" :finish="time+item.order_time*1000"></countdown>
									<!-- {{item.order_time | getLeftTime}} -->
								</view>
							</view>
							<view v-else-if="item.status===1||item.status===2">{{item.order_time | formatDate}}</view>
							<view v-else>{{item.order_time}}</view>
						</view>
					</view>
					<view class="detail">
						<view class="pic">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="intro">
							<view class="title">
								<text>{{item.goods_name}}</text>
							</view>
							<view class="jigou">
								<text>{{item.shop_name}}</text>
							</view>
							<view class="time">
								<image src="../../../static/icon/shijian2.png" mode=""></image>
								<text>{{item.spec}}</text>
							</view>
						</view>
					</view>
					<view class="price">
						<text class="shiji">实付：</text>
						<text class="icon">¥</text>
						<text class="num">{{item.price}}</text>
					</view>
				</navigator>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import countdown from '../../../components/yyh-timer/tanchu/tanchu.vue'
	export default {
		data() {
			return {
				nav: ['全部', '待支付', '已支付', '已取消'],
				navIndex: 0,
				list: [],
				page: 1,
				loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
				status: "",
				time:new Date().getTime(),
			}
		},
		components: {
			countdown
		},
		created() {
			uni.showLoading({
				title: "加载中...",
				mask: true
			})
			uni.getStorage({
				key: 'user_info',
				success: (res) => {
					this.token = res.data.token;
					this.getlist()
				},
				fail: (res) => {
					uni.redirectTo({
						url: '../../login/auth'
					});
				}
			});
		},
		onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.page += 1
				this.getlist()
			}
		},
		methods: {
			changeStatus(obj, index) {
				if (obj === '全部') {
					this.status = "";
				} else if (obj === '待支付') {
					this.status = 0;
				} else if (obj === '已支付') {
					this.status = 1;
				} else {
					this.status = 3;
				}
				this.navIndex = index;
				this.page = 1;
				this.list = [];
				this.getlist();
			},
			getlist() {
				uni.request({
					url: `https://mx.acktechnologies.com.cn/api/wxapp/mine/order/list`,
					data: {
						"token": this.token,
						"page": this.page,
						"pageSize": 20,
						"status": this.status
					},
					method: 'GET',
					success: res => {
						console.log(res)
						uni.hideLoading();
						if (res.data.code == 1) {
							if (res.data.data) {
								this.list = this.list.concat(res.data.data)
								if (res.data.data.length < this.pagesize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
									this.isLoadMore = true
									this.loadStatus = 'nomore'
								} else {
									this.isLoadMore = false
								}
							} else {
								this.isLoadMore = true
								this.loadStatus = 'nomore'
							}
						} else { //接口请求失败的处理
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							this.isLoadMore = false
							if (this.page > 1) {
								this.page -= 1
							}
						}
					},
					fail: () => { //接口请求失败的处理
						uni.showToast({
							title: '服务器开小差了呢，请您稍后再试',
							icon: 'none'
						})
						this.isLoadMore = false
						if (this.page > 1) {
							this.page -= 1
						}
					},
				});
			},
		},
		filters: {
			formatDate: function(value) {
				let date = new Date(value * 1000);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s;
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
			},
			getLeftTime(value) {
				var $lefttime = parseInt(value * 1000);
				let setTimeLeft;
				if ($lefttime < 0) {
					clearTimeout(setTimeLeft);
					return "00:00:00";
				} else {
					$lefttime -= 1000;
					var leftsecond = parseInt($lefttime / 1000);
					var nD = Math.floor(leftsecond / (60 * 60 * 24)); //天
					var hour = Math.floor(leftsecond / 3600);
					var nH = Math.floor((leftsecond - nD * 24 * 60 * 60) / 3600); //小时
					var nM = Math.floor((leftsecond - nD * 24 * 60 * 60 - nH * 3600) / 60); //分钟
					var nS = Math.floor(leftsecond - nD * 24 * 60 * 60 - nH * 3600 - nM * 60); //秒
					hour = (hour < 10 ? '0' + nH : hour);
					nM = (nM < 10 ? '0' + nM : nM);
					nS = (nS < 10 ? '0' + nS : nS);
					return hour + ":" + nM + ":" + nS;
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background: #F9F9FB;
	}
	.timeContainer{
		display: flex;
	}
	.navBar {
		display: flex;
		flex-direction: row;
		align-items: center;

		.navItem {
			width: 187.5rpx;
			height: 132rpx;
			line-height: 132rpx;
			text-align: center;
			font-size: 15px;
			color: #999999;
		}

		.active {
			font-size: 17px;
			font-weight: 600;
			color: #333333;
			position: relative;
		}

		.active::after {
			position: absolute;
			bottom: 30rpx;
			left: 67.75rpx;
			display: block;
			content: "";
			width: 52rpx;
			height: 8rpx;
			background: #42D296;
			border-radius: 4rpx;
		}
	}

	.item {
		width: 670rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 20rpx 0px #E9EBF6;
		border-radius: 16rpx;
		margin: 20rpx auto 0 auto;
		padding: 20rpx 18rpx;
		box-sizing: border-box;

		.statusContainer {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #EBEBEB;
			font-size: 13px;
			color: #999999;
			padding-bottom: 20rpx;
		}

		.detail {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			padding-top: 20rpx;
			box-sizing: border-box;
			.pic {
				width: 200rpx;
				height: 200rpx;
				flex-shrink: 0;
				margin-right: 22rpx;

				image {
					display: block;
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}

			.title {
				font-size: 16px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #333333;
			}

			.jigou {
				display: inline-block;
				padding: 3rpx 5rpx;
				font-size: 13px;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #66A8A0;
				background: #FFFFFF;
				border-radius: 2px;
				border: 1px solid #C1E0DC;
				margin-top: 20rpx;
			}

			.time {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 20rpx;

				image {
					width: 26rpx;
					height: 26rpx;
				}

				text {
					font-size: 13px;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #666666;
					margin-left: 10rpx;
				}
			}

			.desc {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 10rpx;

				image {
					width: 26rpx;
					height: 24rpx;
				}

				text {
					width: 320rpx;
					font-size: 13px;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #666666;
					margin-left: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		.price {
			color: #333333;
			border-top: 1px solid #EAEAEA;
			text-align: right;
			margin-top: 20rpx;

			.shiji {
				font-size: 13px;
				color: #666666;
			}

			.icon {
				font-size: 13px;
			}

			.num {
				font-size: 18px;
				margin-left: 5rpx;
			}
		}
	}
</style>
